<template>
	<view>
		<view  class="flex mb20" v-if="myRankUser.rank">
			<view class="index">
				{{myRankUser.rank}}
			</view>
			<view class="flex borderBottom" style="flex: 1;">
				<u-avatar mode='aspectFill' :src='myRankUser.user.avatar' size='100rpx' shape='square'  @click.stop='jumpUser(myRankUser.user.id)'/>
				<view class="userContent">
					<view>
						<u--text lines='1' :text='myRankUser.user.nick_name' size='24rpx' />
					</view>
					<view>
						<u--text lines='1' :text='myRankUser.title' size='24rpx' />
					</view>
				</view>
				<view>
					<view v-if="myRankUser.last_different_weight>=0">
						<u-icon name='arrow-downward' labelPos='left' :label='myRankUser.last_different_weight+"kg"' color='green'
							size='28rpx' labelSize='24rpx' labelColor='green' />
					</view>
					<view v-if="myRankUser.last_different_weight<0">
						<u-icon name='arrow-upward' labelPos='left' :label='0-myRankUser.last_different_weight+"kg"' color='red'
							size='28rpx' labelSize='24rpx' labelColor='red' />
					</view>
				</view>
			</view>
		</view>
		<view v-for="(item,index) in list" :key="item.id" class="flex mb20">
			<view class="index">
				{{index+1}}
			</view>
			<view class="flex borderBottom" style="flex: 1;">
				<u-avatar mode='aspectFill' :src='item.user.avatar' size='100rpx' shape='square'  @click.stop='jumpUser(item.user.id)'/>
				<view class="userContent">
					<view>
						<u--text lines='1' :text='item.user.nick_name' size='24rpx' />
					</view>
					<view>
						<u--text lines='1' :text='item.title' size='24rpx' />
					</view>
				</view>
				<view>
					<view v-if="item.last_different_weight>=0">
						<u-icon name='arrow-downward' labelPos='left' :label='item.last_different_weight+"kg"' color='green'
							size='28rpx' labelSize='24rpx' labelColor='green' />
					</view>
					<view v-if="item.last_different_weight<0">
						<u-icon name='arrow-upward' labelPos='left' :label='0-item.last_different_weight+"kg"' color='red'
							size='28rpx' labelSize='24rpx' labelColor='red' />
					</view>
				</view>
			</view>
		</view>
		<view v-if="!list.length">
			<empty />
		</view>
	</view>
</template>

<script>
	export default {
		props: ['list','myRankUser','conquer_id'],
		methods:{
			jumpUser(id){
				this.$utils.navigateTo({
					url:'/User/detail?id='+id+'&conquer_id='+this.conquer_id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.flex {
		display: flex;
		align-items: center;
	}

	.userContent {
		display: flex;
		flex-direction: column;
		height: 100rpx;
		flex: 1;
		margin-left: 10rpx;
		justify-content: space-between;
	}

	.index {
		width: 30rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		margin-right: 10rpx;
	}
</style>